<template>
   <div style="width: 300px;">
           <el-input placeholder="请输入部门名称进行搜索..." style="width: 270px;" size="small"  prefix-icon="el-icon-search"
      v-model="filterText">
             </el-input>
        <el-tree  :data="deps" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
      ref="tree" style="width: 400px;margin-top: 10px;">
      
                 <span class="custom-tree-node"
        style="display: flex;justify-content: space-between;width: 100%;line-height: 20px;"
         slot-scope="{ node, data }">
                       <span>{{ node.label }}</span>
                       <span>
                           <el-button type="primary" size="mini" class="depBtn"
            @click="() => showAddDepView(data)">添加部门</el-button>
                           <el-button type="danger" size="mini" class="depBtn"
             @click="() => deleteDep(data)">删除部门</el-button>
                         </span>
                   </span>
      
             </el-tree>
           <el-dialog  title="添加部门"  :visible.sync="dialogVisible"  width="30%">
                 <div>
        <el-form ref="dep" :rules="rules" :model="dep" label-width="30%" class="demo-ruleForm">
          <el-form-item label="上级部门">

            <font style="color: #cea8f1;padding-left: 10px;">{{ pname }}</font>
          </el-form-item>
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="dep.name" placeholder="请输入部门名称..." size="small" style=" width: 205px;"></el-input>
          </el-form-item>
          <el-form-item style="padding-top: 10px;padding-left: 80px;">
            <el-button size="small" @click="dialogVisible = false">取消</el-button>
            <el-button size="small" type="primary" @click="doAddDep('dep')">立即创建</el-button>
          </el-form-item>
        </el-form>           
      </div>
             </el-dialog>
       </div>
</template>

<script>
export default {
  name: "DepMana",
  data() {
    return {
      filterText: '',
      deps: [],
      dep: {
        name: '',
        parentId: -1
      },
      pname: '',
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
        ],
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.initDeps();
  },
  methods: {
    initDep() {
      this.dep = {
        name: '',
        parentId: -1
      }
      this.pname = '';
    },
    removeDepFromDeps(p, deps, id) {
      for (let i = 0; i < deps.length; i++) {
        let d = deps[i];
        if (d.id == id) {
          deps.splice(i, 1);
          if (deps.length == 0) {
            p.parent = false;
          }
          return;
        } else {
          this.removeDepFromDeps(d, d.children, id);
        }
      }
    },
    addDep2Deps(deps, dep) {
      for (let i = 0; i < deps.length; i++) {
        let d = deps[i];
        if (d.id == dep.parentId) {
          d.children = d.children.concat(dep);
          if (d.children.length > 0) {
            d.parent = true;
          }
          return;
        } else {
          this.addDep2Deps(d.children, dep);
        }
      }
    },
    doAddDep(dep) {
      this.$refs[dep].validate((valid) => {
        if (valid) {
          this.postRequest('/system/basic/department/', this.dep).then(resp => {
            if (resp) {
              this.addDep2Deps(this.deps, resp.obj);
              this.initDep();
              this.dialogVisible = false;
            }
          })
        }
      })
    },
    showAddDepView(data) {
      this.pname = data.name;
      this.dep.parentId = data.id;
      this.dialogVisible = true;
    },
    deleteDep(data) {
      if (data.parent) {
        this.$message.error("父部门删除失败！");
      } else {
        this.$confirm('此操作将永久删除 "' + data.name + '" 部门, 是否继续 ? ', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/system/basic/department/' + data.id).then(resp => {
            if (resp) {
              this.removeDepFromDeps(null, this.deps, data.id);
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    initDeps() {
      this.getRequest('/system/basic/department/').then(resp => {
        if (resp) {
          this.deps = resp;
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    }
  }
}

</script>


<style>
.depBtn {
  padding: 2px;
}
</style>